ImageMagickを使って『画像への枠線追加』処理を一括で行う
画像をHTMLに表示させる際(私の場合はだいたいブログとかドキュメント書きですが)、表示させる画像に罫線を表示させたい、という時は良くあるかと思いますし、概ね対処方法としては以下のいずれかが採用されるかと思います。
- 付与したい画像のimgタグ属性に罫線のスタイルを追加
- CSS設定でimgタグに対して罫線スタイルを当てる
ですが、上記以外にも『そもそもの画像に枠線(罫線)を入れちゃえば良いんじゃね？』というケースも無くはないのかな？と思います。 そうなった際に探っておきたいのが『複数の画像ファイルに対して一括で画像に枠線を追加する方法』です。
当エントリでは、ImageMagickというコマンドラインツールを使ってこの要望を実現する方法について紹介します。
目次
ImageMagickのインストール
インストールした環境はMac OSXの下記のバージョン。
% sw_vers ProductName: Mac OS X ProductVersion: 10.15.3 BuildVersion: 19D76
インストールはbrewコマンドで一発。magick -versionでバージョン表示がなされていればOKです。
% brew install imagemagick % magick -version Version: ImageMagick 7.0.10-28 Q16 x86_64 2020-08-16 https://imagemagick.org Copyright: © 1999-2020 ImageMagick Studio LLC License: https://imagemagick.org/script/license.php Features: Cipher DPC HDRI Modules OpenMP(3.1) Delegates (built-in): bzlib freetype gslib heic jng jp2 jpeg lcms lqr ltdl lzma openexr png ps tiff webp xml zlib
mogrifyコマンドによる一括変換
ここでは所定の画像ファイル群に対して『一括で枠線を付与』させたいので、一括処理が行えるmogrifyコマンドを用います。
画像枠線付与で考慮する設定は以下2点。
-bordercolor 色(色名またはカラーコード)で枠線(罫線)の色を設定-border 左右辺の罫線の太さ(pixel)x上下辺の罫線の太さ(pixel)で枠線(罫線)の太さを指定
実行結果を検証するために以下の画像群を用意しました。以前のエントリで使ったものです。画像自体は白背景のもの、枠線については特に何も設定されていないです。
実行したコマンドは以下。今回は結果を分かりやすく表示させるために枠線の太さを全て30ピクセルとしています。(実際設定するとなるとグレー系の配色、罫線の太さも1〜2ピクセル辺りにするのがさりげなくていいかなと思われます)
## 実際はこれくらいの塩梅で罫線設定したい感じ... ## ※16進数カラーコード指定の場合はダブルクォーテーションが必要 ## mogrify -bordercolor "#cccccc" -border 1x1 -path ./output *.png % mogrify -bordercolor "#0000ff" -border 30x30 -path ./output *.png
コマンド実行後、出力フォルダの内容を見てみます。以下の様な形で枠線が設定されていることが確認出来ました！
まとめ
という訳で『ImageMagickによる画像ファイルへの一括枠線追加』に関する方法の紹介でした。
当初この件についてはGUIツールを探しており、『iMage Tools』あたりがお手軽簡単操作で良いかな？と思っていたのですがコマンドライン且つ複数ファイルに対して一括に操作出来るImageMagickの存在を知り 使ってみた次第です。同じ様な要件で画像変換を必要とされている方がいましたら是非ImageMagickをお試し頂けますと幸いです。
![[動画公開] 目指せ、爆速サイト! Cloudinaryで始める画像最適化 #devio2020](https://devio2023-media.developers.io/wp-content/uploads/2020/06/848c8d9b6e4887cb9c9c6cb87b9a2cd4.png)
